<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap分页和进度条</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main {
        margin: 1%;
        padding: 1%;
    }
</style>

<body>

    <main>

        <div class="card">
            <div class="card-body">
                <span id="number"></span>
                <div class="progress">
                    <div id="progress-bar" class="progress-bar bg-success progress-bar-striped"></div>
                </div>
                <div class="mt-5 d-flex justify-content-center">
                    <button id="start" value="1" class="btn btn-primary">点击蓄力</button>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <span id="number-2"></span>
                <div class="progress">
                    <div id="progress-bar-2" class="progress-bar bg-success progress-bar-striped"></div>
                </div>
                <div class="mt-5 d-flex justify-content-center">
                    <button id="start-2" value="1" class="btn btn-primary">点击蓄力</button>
                </div>
            </div>
        </div>  

        <div class="d-flex justify-content-center m-5 p-5">
            <ul class="pagination pagination-lg">
                <li id="home" class="page-item">
                    <a id="home-a" class="page-link" href="#">首页</a>
                </li>
                <li class="page-item">
                    <a id="default-active-li" class="page-link" href="#">1</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">4</a>
                </li>
                <li class="page-item">
                    <a id="default-end-li" class="page-link" href="#">5</a>
                </li>
                <li id="footer" class="page-item">
                    <a id="footer-a" class="page-link" href="#">尾页</a>
                </li>
            </ul>
        </div>
    </main>


    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script>
        //两个功能, 
        //1 点击蓄力 进度条开始增加, 再次点击时进度条停止
        let progress_count = 0;
        let progress_count_2 = 0;
        let number = $('#number');
        let number_2 = $('#number-2');
        let start = $('#start');
        let start_2 = $('#start-2');
        let bar = $('#progress-bar');
        let bar_2 = $('#progress-bar-2');
        let timeTaskArray = [];
        let timeTaskArray_2 = [];
        function startAdd(){
            progress_count++;
            bar.css('width', progress_count + '%');
            bar[0].className = 'progress-bar bg-success progress-bar-striped progress-bar-animated'
            if(progress_count > 100){
                start[0].className = 'btn btn-success';
                start[0].innerText = '蓄力完成, 点击重来';
                start.val(-1);
                return false;
            }else{
                let margin_left_count = progress_count ? progress_count/1.1 : 0 
                number.css('margin-left', margin_left_count + '%')
                number[0].innerText = progress_count + '%';

                timeTaskArray = setTimeout(() => {
                    startAdd();
                }, 200);
            }
            
        }
        function startAdd_2(){
            progress_count_2++;
            bar_2.css('width', progress_count_2 + '%');
            bar_2[0].className = 'progress-bar bg-success progress-bar-striped progress-bar-animated'
            if(progress_count_2 > 100){
                return false;
            }else{
                let margin_left_count = progress_count_2 ? progress_count_2/1.3 : 0 
                number_2.css('margin-left', margin_left_count + '%')
                number_2[0].innerText = progress_count_2 + '%';

                timeTaskArray_2 = setTimeout(() => {
                    startAdd_2();
                }, 100);
            }
            
        }

        start.click(()=>{
            if(start.val() === '1'){
                start[0].className = 'btn btn-danger';
                start[0].innerText = '取消蓄力';
                start.val(0);
                startAdd();
            }else if (start.val() === '0'){
                start[0].className = 'btn btn-primary';
                start[0].innerText = '点击蓄力';
                start.val(1);
                bar[0].className = 'progress-bar bg-success progress-bar-striped';
                console.log(timeTaskArray);
                clearTimeout(timeTaskArray);  
            }else{
                progress_count = 0;
                start[0].className = 'btn btn-danger';
                start[0].innerText = '取消蓄力';
                start.val(0);
                startAdd();
            }
            
        })
        //2 长按蓄力, 松开时进度条停止

        start_2.on('mousedown',function(){ 
            start_2[0].className = 'btn btn-danger';
            start_2[0].innerText = '松开取消蓄力';
            startAdd_2();

		}); 
		$('html').on('mouseup',function(){ 
            start_2[0].className = 'btn btn-primary';
            start_2[0].innerText = '长按蓄力';
            start_2.val(1);
            progress_count_2 = 0;
            bar_2[0].className = 'progress-bar bg-success progress-bar-striped';
            clearTimeout(timeTaskArray_2);
		}); 
    </script>
    <script>

        $(()=>{
            $('#default-active-li').click();
        })
        let item = $('.page-item');
        let ul_item = $('.pagination');
        let li_home = $('#home');
        let li_footer = $('#footer');
        item.click((obj)=>{
            // 清除全体选中效果
            let temp = ul_item.find('li.active');
            if(temp[0] !== undefined){
                temp[0].className = 'page-item';
            }
            
            //逻辑: 点击首页或尾页时视为点击1或5
            if(obj.target.id === 'home-a'){
                $('#default-active-li').click();
                return flase;
            }
            if(obj.target.id === 'footer-a'){
                $('#default-end-li').click();
                return flase;
            }
            //逻辑: 页码为1时删除首页按钮, 为5时删除尾页按钮
            if(obj.target.id === 'default-active-li'){
                li_home[0].className = 'page-item fade'
            }else{
                li_home[0].className = 'page-item'
            }
            if(obj.target.id === 'default-end-li'){
                li_footer[0].className = 'page-item fade'
            }else{
                li_footer[0].className = 'page-item'
            }
            obj.target.parentElement.className += ' active'
        })
    </script>
</body>

</html>